<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Make thumb</title>
<meta name="description" content="HTML5 thumbnail generator">
<style>
html{background-color: #EEE;padding: 50px;}
img{border: 1px solid #000;}
.test{display:none;}
.test p{width: 150px;height: 150px;border: 1px solid #f60;}
.t1{
    background-repeat: no-repeat;background-position: 50% 50%;
    /*background-size: 100px 100px;*/
    /*background-size: auto 100px;*/
    /*background-size: cover;*/
    /*background-size: contain;*/
    background-image:url();
}
</style>
</head>
<body>
<!-- <form id="j-form" action="api.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upfile" id="j-file" />
</form> -->

<!-- ajax -->
<iframe name="ifr" style="display: none;"></iframe> 
<form id="j-form" target="ifr" action="api.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upfile" id="j-file" />
</form>

<script src="http://meigui.qq.com/js/jquery.js"></script>
<!-- <script src="jpegmeta.js"></script> -->
<!-- <script src="http://www.nihilogic.dk/labs/exif/exif.js"></script>
<script src="http://www.nihilogic.dk/labs/binaryajax/binaryajax.js"></script> -->
<script src="binaryajax.js"></script>
<script src="exif.js"></script>
<script src="megapix-image.js"></script>
<script src="jquery.make-thumb.js"></script>
<script>
$(function() {
    var $form = $('#j-form');
    var $file = $('#j-file');
    // thumb

    $file.makeThumb({
        width: 400,
        height: 400,
        mark: {padding: 5, src: 'mark.png', width: 30, height: 30},
        success: function(dataURL, tSize, file, sSize, fEvt) {
            // 可以得到图片名, 高度等信息, 用来做一些判断, 比如图片大小是否符合要求等..
            // console.log(fEvt.target, file.name, sSize, sSize.width, sSize.height);
            // console.log(file.name, sSize.width +'->'+ tSize.width, sSize.height +'->'+ tSize.height);
            var thumb = new Image();
            thumb.src = dataURL;
            // try{}catch(err){console.log(err);}
            // var title = file.name +', '+ sSize.width +'->'+ tSize.width +', '+ sSize.height +'->'+ tSize.height;
            var title = file.name;
            var $div = $('<div><h6>文件来自HTML5</h6></div>').append(thumb).append('<p>' +title+ '</p>');
            $('.test').before($div);

            // post data
            var $up = $('<input type="hidden" name="base64">');
            $up.insertAfter($file).val(dataURL);
            $file.remove();
            //console.log($form.serialize());
            $form.submit();
        }
    });
    // $file.change(function(){alert(111)});
    // test
    /*$file.change(function(){
        $form.submit();
    });*/
});
</script>
<div id="ret"></div>
<div class="test">
    <h5>css3 background-size</h5>
    <p class="t1"></p>
</div>
</body>
</html>